<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const middle = ref(null);
const subYearcopy = ref([]);
const subYear = ref(['2015年', '2016年', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年']);
const subYearDataCopy = ref([]);
const subYearData = ref([1, 2, 3, 4, 5, 6, 7, 8]);
const myChart = ref(null);
let index = 0;
let timer;
// bottom 数据
const bootomData = ref([
    '2015年:1条线路,即3号线',
    '2016年,2条线路,即3号线和2号线;',
    '2017年,3条线路,即3号线、2号线和11号线;',
    '2018年,4条线路,即3号线、2号线、11号线和13号线;',
    '2019年,5条线路,即3号线、2号线、11号线、13号线和4号线;',
    '2020年,6条线路,即3号线、2号线、11号线、13号线、4号线和8号线;',
    '2021年,7条线路,即3号线、2号线、11号线、13号线、4号线、8号线和6号线;',
    '2022年,8条线路,即3号线、2号线、11号线、13号线、4号线、8号线、6号线和7号线'
])
const bootomDataCopy = ref('')
// middle的数据动态更新
function setadd() {
    subYearcopy.value.push(subYear.value[index]);
    subYearDataCopy.value.push(subYearData.value[index]);
    // middle 数据
    // bootomDataCopy.value = ''
    bootomDataCopy.value = bootomData.value[index]
    index++;
    if (index > subYear.value.length) {
        index = 0;
        subYearcopy.value = [];
        subYearDataCopy.value = [];
    }
    myChart.value.setOption({
        radiusAxis: {
            data: subYearcopy.value
        },
        series: [{
            data: subYearDataCopy.value
        }]
    });
}
// middle 挂载视图
onMounted(() => {
    myChart.value = echarts.init(middle.value);
    myChart.value.setOption({
        title: [{
            text: '地铁数量变化',
            left: 'auto',
            textStyle: {
                color: '#1DDAFD',
                fontWeight: 'bold',
                lineHeight: 30,
                fontSize: '22',
                textBorderColor: '#000'
            },
        }],
        color: [
        {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#9be97ff3' // 0% 处的颜色
                }, {
                    offset: 1, color: '#47ed0af3' // 100% 处的颜色
                }],

            },
        {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#f7da9cf3' // 0% 处的颜色
                }, {
                    offset: 1, color: '#eca30666' // 100% 处的颜色
                }],

            },
        {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#73b18a' // 0% 处的颜色
                }, {
                    offset: 1, color: '#03f55c' // 100% 处的颜色
                }],

            },
        {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#f09898' // 0% 处的颜色
                }, {
                    offset: 1, color: '#f41313' // 100% 处的颜色
                }],

            },
        {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#e6a4f2' // 0% 处的颜色
                }, {
                    offset: 1, color: '#da07ff' // 100% 处的颜色
                }],

            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#ddeff5' // 0% 处的颜色
                }, {
                    offset: 1, color: '#03b7f8' // 100% 处的颜色
                }],

            }, {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#defef9' // 0% 处的颜色
                }, {
                    offset: 1, color: '#00ffd5' // 100% 处的颜色
                }],

            },
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: '#faf2cd' // 0% 处的颜色
                }, {
                    offset: 1, color: '#fad105' // 100% 处的颜色
                }],

            }],
        polar: {
            radius: [15, '85%']
        },
        angleAxis: {
            max: 9,
            startAngle: -180
        },
        radiusAxis: {
            type: 'category',
            data: subYearcopy.value
        },
        tooltip: {},
        toolbox: {
            top: 'bottom'
        },
        series: [{
            type: 'bar',
            data: subYearData.value,
            coordinateSystem: 'polar',
            colorBy: 'data',
            label: {
                show: true,
                position: 'middle',
                formatter: '{c}条'
            }
        }]
    });

    timer = setInterval(() => {
        setadd();
    }, 1500);
});
// 数据更新前删除middle数据更新的定时器
onBeforeUnmount(() => {
    clearInterval(timer);
});


</script>
<template>
    <div>
        <div class="left">
            <div class="top">
                <div class="top-title">截至目前</div>
                <div class="top-container">
                    <div class="top-list">
                        <div class="top-list-item">
                            <i class="iconfont icon-ditiezhandian"></i>
                            <div>车站数量</div>
                            <span class="item-num">284</span><span class="item-unit">座</span>
                        </div>
                        <div class="top-list-item">
                            <i class="iconfont icon-lujingguihua"></i>
                            <div>运营里程</div>
                            <span class="item-num">470.4</span><span class="item-unit">公里</span>
                        </div>
                    </div>
                    <div class="top-list">
                        <div class="top-list-item">
                            <i class="iconfont icon-chengshiguidaojiaotongyunyingxianlu"></i>
                            <div>青岛地铁总长度</div>
                            <span class="item-num">470.4</span><span class="item-unit">公里</span>
                        </div>
                        <div class="top-list-item">
                            <i class="iconfont icon-renliuliangmidu"></i>
                            <div>日均客流量</div>
                            <span class="item-num">132</span><span class="item-unit">万人次</span>
                        </div>
                    </div>
                    <div class="top-list">
                        <div class="top-list-item">
                            <i class="iconfont icon-gaofeng"></i>
                            <div>最高峰客运量</div>
                            <span class="item-num">190.9</span><span class="item-unit">万人次</span>
                        </div>
                        <div class="top-list-item">
                            <i class="iconfont icon-ditie"></i>
                            <div>开通总线路</div>
                            <span class="item-num">11</span><span class="item-unit">条</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="middle" ref="middle">123</div>
            <div class="bottom">
                <div class="bottom-content">
                    {{ bootomDataCopy || '2015年：1条线路，即3号线；' }}
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
@import '@/assets/font/iconfont.css';
@import './index.less'
</style>